import { useTitle } from 'ahooks'
import style from './style.less'
import { Tabs } from 'antd-mobile'
import TabBar from '../.tab-bar';
import React, { useEffect, useState } from 'react'
import List from './list'
import { history } from 'umi';

export default () => {
    useTitle('交易订单')
    const [activeKey, setActiveKey] = useState('1');

    const handleTabChange = (key) => {
        setActiveKey(key);
    };

    return (
        <div className={style.page}>
            <div className={style.tabsContainer}  >
                <Tabs className={style.tabs} activeKey={activeKey} onChange={handleTabChange}>
                    <Tabs.Tab title='待确认' key='1' >
                        <List State={['SUPPLIER', 'PURCHASER']} />
                    </Tabs.Tab>
                    <Tabs.Tab title='已完成' key='2'>
                        <List State={['SUCCESS']} />
                    </Tabs.Tab>
                    <Tabs.Tab title='取消交易' key='3'>
                        <List State={['FAILED']} />
                    </Tabs.Tab>
                </Tabs>
            </div>
            <TabBar />
        </div>
    )
}
